import React from 'react';
import BlockBtn from './btn-block-ico';
import $ from 'jquery';
require( '../../css/nav-bar.css');
export default class NavBar extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            show: this.props.stat,
            itemWidth: {width:'auto'}
        };
        this.initNav = this.initNav.bind(this)
    }
    componentWillMount(){
        $(window).bind("resize",this.initNav);
        this.initNav()
    }
    componentDidUpdate(){
    }
    initNav(){
        let navLen = this.props.navInfo.length,
            appWidth = $(window).width();
        let navItemWidth = parseInt(appWidth/navLen)+'px';
        this.setState({
            itemWidth : {width:navItemWidth}
        })
    }
    linkRender(info,a){
        return info.map((inf,i) => {
           return (<li key={"main_nav_"+i}
                       style={this.state.itemWidth}
                       className={i==a?'active':''}>
                    <BlockBtn {...inf} width={this.state.itemWidth} />
           </li>)
        })
    }
    render(){
        let _cn = '';
        if(this.state.show.show){
            _cn = "show"
        }else{
            _cn = 'hide'
        }
        let activeItem = this.state.show.active;
        return (
            <ul className={"main-nav-bar "+ _cn}>
                {this.linkRender(this.props.navInfo,activeItem)}
            </ul>
        )
    }
}
NavBar.defaultProps = {
    navInfo:[
        {linkto:'/',classname:'nav-btn-1',txt:'云影像'},
        {linkto:'/call-doctor',classname:'nav-btn-2',txt:'问诊'},
        {linkto:'/forums',classname:'nav-btn-3',txt:'社交'},
        {linkto:'/mine',classname:'nav-btn-4',txt:'我的'}
    ]
};